<template>
    <div>
        <div class="his-hot" v-if="isShowHistory">
            <div class="hd">
                <h4>历史记录</h4>
                <van-icon name="delete-o" @click="delClick"/>
            </div>
            <div class="bd">
                <van-tag plain type="default" v-for="(item,index) in historyKeywordList" :key="index" @click="tagClick(item)">{{item}}</van-tag>
            </div>
        </div>

        <div class="his-hot">
            <div class="hd">
                <h4>热门搜索</h4>
            </div>
            <div class="bd">
                <van-tag plain :type=" item.is_hot===1?'danger':'default'" v-for="(item,index) in hotKeywordList" :key="index"  @click="tagClick(item.keyword)">{{item.keyword}}</van-tag>
            </div>
        </div>
    </div>
</template>

<script>
import {ClearHistory} from "@/request/api"
export default {
    props:["historyKeywordList", "hotKeywordList"],
    data () {
        return {

            isShowHistory:true
        }
    },
    methods:{
        tagClick(val){

            // 发起搜索商品的请求
            this.$emit("tagClick", val)
        },
        delClick(){
            console.log("清除历史记录");

            // 发起清除历史记录的请求
            ClearHistory().then(res=>{
                console.log(res);
                this.$toast.success('删除成功!');
                setTimeout(()=>{
                    this.isShowHistory = false
                },500)
                
            })
        }
    }
}
</script>
<style lang = "less" scoped>
    .his-hot{
        background-color: #fff;
        padding: .1rem .1rem 0;
        margin-bottom: .2rem;

        .hd{
            display:flex;
            justify-content: space-between;
            font-size: .18rem;
            margin-bottom: .1rem;
            h4{
                font-size: .18rem;
            }
        }

        .van-tag{
            margin-right: .1rem;
            padding: 0 .04rem;
            margin-bottom: .1rem;
        }
    }
</style>